@charset "utf-8";
@import "common/reset";
@function p($px) {
    @return $px/2*1px;
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    background: url(../../img/check-bg1.png)no-repeat;
    background-size: cover;
}

.webM {
    position: relative;
    overflow: hidden;
    .titl {
        width: p(555);
        //      height: p(35);
        margin: 0 auto;
        margin-top: p(100);
        img {
            width: 100%;
        }
    }
    .tu1 {
        width: p(250);
        //      height: p(350);
        overflow: hidden;
        margin: 0 auto;
        margin-top: p(42);
        img {
            width: 100%;
        }
    }
    .x_22{
       font-size: 0;
       width: p(384);
       margin: 0 auto;
      >div{
             display: inline-block;
            width: p(182);
            height: p(152);
             margin-bottom:p(20) ;
            img{
                width: 100%;
            }
        }
        div:nth-child(2n-1){
            margin-right:p(20) ;
        }
    }
    .xuanX {
        margin-top: p(125);
        div {
            width: p(368);
            height: p(65);
            background: url(../../img/imgs/bg1-1.png)no-repeat;
            background-size: cover;
            margin-left: p(57);
            margin-top: p(30);
            overflow: hidden;
            &:hover {
                background: url(../../img/imgs/hover-bg.png);
                background-size: cover;
            }
            img {
                height: 40%;
                margin:p(15) 0 0 p(20);
            }
        }
        .yes:hover {
            background: url(../../img/imgs/hover-bg1.png);
            background-size: cover;
        }
    }
    .dog {
        width: p(84);
        height: p(94);
        position: absolute;
        right: p(80);
        bottom: 0;
        //音符动画
        >div {
            position: absolute;
            top: 0;
            left: 0;
        }
        .yin1 {
            animation-duration: 10s;
            animation-name: yinfu;
            animation-fill-mode: both;
            animation-iteration-count: infinite;
        }
        .yin2 {
            animation-duration: 8s;
            animation-name: yinfu;
            animation-fill-mode: both;
            animation-iteration-count: infinite;
        }
        .yin3 {
            animation-duration: 7s;
            animation-name: yinfu;
            animation-fill-mode: both;
            animation-iteration-count: infinite;
        }
        .yin4 {
            animation-duration: 6s;
            animation-name: yinfu;
            animation-fill-mode: both;
            animation-iteration-count: infinite;
        }
        .yin5 {
            animation-duration: 5s;
            animation-name: yinfu;
            animation-fill-mode: both;
            animation-iteration-count: infinite;
        }
        @keyframes yinfu {
            0% {
                opacity: 0;
            }
            25% {
                transform: translate(20px, -30px);
                opacity: .8;
            }
            50% {
                transform: translate(30px, -60px);
                opacity: 1;
            }
            50% {
                transform: translate(20px, -100px);
                opacity: 0.8;
            }
            75% {
                transform: translate(35px, -150px);
                opacity: 0.5;
            }
            100% {
                transform: translate(30px, 200px);
                opacity: 0;
            }
        }
        img {
            width: 100%;
        }
    }
    .yun {
        position: relative;
        >div {
            position: absolute;
            top: -290px;
            animation-fill-mode: both;
            animation-iteration-count: infinite;
            animation-name: yun2;
        }
        div:nth-child(1) {
            left: -10px;
            animation-duration: 20s;
            animation-delay: 1s;
        }
        div:nth-child(2) {
            left: 80px;
            animation-duration: 40s;
            animation-delay: 1.1s;
        }
        div:nth-child(3) {
            left: 175px;
            animation-duration: 35s;
            animation-delay: 1.3s;
        }
        div:nth-child(4) {
            left: 250px;
            animation-duration: 18s;
            animation-delay: 1.2s;
        }
        div:nth-child(5) {
            left: 140px;
            animation-duration: 26s;
            animation-delay: 1s;
        }
        @keyframes yun2{
            0%{
                transform: translate(0px) scale(0.5);
            }
            100%{
                transform: translate(-400px)scale(0.5);
            }
        }
    }
}